<template>
  <div class="node value-input">
    <div class="node-title line5">
      <div>输入</div>
      <div class="flow-dot flow-right" magnet="true" :class="'flow-exec'" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <el-form
      :model="formData"
      label-position="top"
      @mousedown.stop
      @focus.stop
      style="cursor: default">
      <el-form-item label="启动文字输入">
        <el-switch v-model="formData.useText" />
      </el-form-item>
      <el-form-item label="启动上下文">
        <el-switch v-model="formData.useContext" />
      </el-form-item>
      <el-form-item label="启动文件输入">
        <el-switch v-model="formData.useFile" />
      </el-form-item>
    </el-form>
    <div>
      <div v-if="formData.useText" class="line5">
        <div>文字</div>
        <div class="flow-dot flow-string flow-right" magnet="true" x-type="output-text" :x-id="'output-text_'+id" x-key="text"></div>
      </div>
      <div v-if="formData.useContext" class="line5">
        <div>上下文</div>
        <div class="flow-dot flow-array flow-right" magnet="true" x-type="output-context" :x-id="'output-context_'+id" x-key="context"></div>
      </div>
      <div v-if="formData.useFile">
        <div class="line5">
          <div>多文件</div>
          <div class="flow-dot flow-file flow-right" magnet="true" x-type="output-files" :x-id="'output-files_'+id" x-key="files"></div>
        </div>
      </div>
      <div class="line5">
        <div>文件ID(算力平台)</div>
        <div class="flow-dot flow-string flow-right" magnet="true" x-type="output-fileId" :x-id="'output-fileId_'+id" x-key="fileId"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {inject, ref} from "vue";
import {Node} from "@antv/x6";
import './node-style.scss'

const formData=reactive<any>({
  useText:true,
  useContext:true,
  useFile:true,
})
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData)
  }
},{deep:true,immediate:false})
</script>
<style scoped lang="scss">
.value-input{
  width: 200px;
  background-color: white;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #9f9f9f;
  gap: 5px;
}
</style>
